<template>
	<view>
		<uni-card v-for="temp in activitylist" 
			@tap="getActivityList()">
			<text class="uni-body">活动部门：{{temp.sysDept.deptName}}</text>
			<br>
			<text class="uni-body">活动标题：{{temp.gxsPendTitle}}</text>
			<br>
			<text class="uni-body">活动类型：{{temp.gxsTypeId}}</text>
			<br>
			<text class="uni-body">剩余名额：{{temp.gxsParticipant}}</text>
			<br>
			<text class="uni-body">活动得分：{{temp.gxsScore}}</text>
			<br>
			<text class="uni-body">活动地点：{{temp.gxsPendLocation}}</text>
			<br>
			<button class="uni-btn" @click="addJionPro(temp)">报名</button>
		</uni-card>
	</view>
</template>

<script>
	import { listActivity } from '@/api/gxs/activity.js'
	import { addJionPro } from '@/api/gxs/jion.js'
	import { getDicts } from "@/api/system/dict/data.js";
	export default {
		data() {
			return {
				statusOptions: [],//字典类型
				activitylist: [] //列表
			}
		},
		onLoad() {
			this.getActivityList(),
			getDicts("gxs_type").then(response => {
			  this.statusOptions = response.data;
			});
		},
		methods: {
			//获取活动列表
			getActivityList() {
				listActivity().then(response => {
					this.activitylist = response.rows;
					this.activitylist.forEach((self, index) => {
					   let status = this.statusOptions.find(item => item.dictValue == self.gxsTypeId);
					   self.gxsTypeId = status.dictLabel;
					});
				});
			},
			
			addJionPro(row) {
				  const gxsPendActivityid = row.gxsPendActivityid 
			
				  this.$modal.confirm('是否确认参加活动编号为"' + gxsPendActivityid ).then(function() {
					return addJionPro(gxsPendActivityid);
				  }).then(() => {
					this.$modal.msgSuccess("报名成功");
				  });
				  this.getList();
				},
		}
	}
</script>

<style lang="scss">
    uni-card {
        width: 48%;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 10px;
        margin-bottom: 10px;
    }
    .uni-body {
        font-size: 16px;
        line-height: 1.5;
    }
    .uni-btn {
        background-color: #1aad19;
        color: #fff;
        border-radius: 5px;
        padding: 5px 10px;
        font-size: 16px;
        margin-top: 10px;
    }
</style>